<template>
  <div class="helpPage">
    <h2>常见问题</h2>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="如何学习课程？" name="1">
        <div>
          <h3>
            进入
            <router-link :to="{ name: 'CoursesList' }">选课页面</router-link>
            挑选课程学习。
          </h3>
        </div>
      </el-collapse-item>
      <el-collapse-item title="如何更换绑定邮箱" name="2">
        <div>
          请您登录数字化成长空间账户，进入我的设置-账号绑定，点击【更换】验证邮箱后即可。
        </div>
        <img :src="require('@/assets/images/更换邮箱.png')" width="800" />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: [],
    };
  },
};
</script>

<style lang="stylus">
.helpPage {
  padding-top: 30px;
  margin: 0 auto;
  width: 1200px;

  h2 {
    font-weight: bold;
  }

  .el-collapse-item__header {
    font-size: 1.17em;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
  }
}
</style>